<template>
  <div class="NewAccountItem">
    <van-nav-bar :title="NavTitle" left-arrow @click-left="$router.back()">
      <template #right >
        <van-icon v-show='titleId == 1' style="margin-right: 20px" name="search" size="20" @click="goNeedPage_recruitStaff('search')" />
        <van-icon v-show='titleId == 1' name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <!-- 输入框 -->
    <div class="content content-input" v-if="$route.meta.isDetailShow">
      <div class="left">
        <img src="../../../assets/logo.png" alt />
        <span>HAHAH</span>
      </div>
      <div class="right">
        <div class="row">
          <span>昵称</span>
          <span>
            <input type="text" placeholder="请输入"/>
          </span>
        </div>
        <div class="row">
          <span>子账号：</span>
          <span>
            <input type="text" placeholder="186329837"/>
          </span>
           
            <!-- <van-icon name="search" size="20" @click="toSearch" class="ellipsis-icon ellipsis-icon_2" /> -->
            <!-- <div
              class="ellipsis-icon"
              @click="toSearch"
            >搜索</div> -->
            <!-- 搜索账号 -->
            <div class="search-pop" v-if="searchShow">
              <div class="search-item"  v-if="!searchLoading">
                <div class="search-left">
                  <img src="../../../assets/logo.png" alt />
                </div>
                <div class="search-right">
                  <span class="account">11111</span>
                  <span class="name">aaa</span>
                </div>
              </div>
              <van-loading size="24px" vertical v-if="searchLoading" style="text-align: center">搜索中...</van-loading>
              <div class="addaccount" @click="$router.push('/addSubCcount')">新建账号</div>

            </div>
            <!-- 搜索账号遮罩层--关闭 -->
            <div class="NewAccountItem_popup" v-if="searchShow" @click="toSearchClose"></div>
          </span>
        </div>
        <div class="row">
          <span>密码：</span>
          <span>
            <input type="password" placeholder="请输入" />
          </span>
        </div>
        <div class="row">
          <span>姓名：</span>
          <span>
            <input type="text" placeholder="请输入" />
          </span>
        </div>
        <div class="row">
          <span>部门：</span>
          <span>
            <input type="text" placeholder="请选择" readonly @click="toCheck(1)" :value="departmentValue" />
            <!-- <van-icon name="ellipsis" size="22" @click="toDeapateMent" class="ellipsis-icon" /> -->
          </span>
        </div>
        <div class="row">
          <span>职位：</span>
          <span>
            <input type="text" placeholder="请选择" readonly @click="toCheck(2)" :value="positionValue" />
          </span>
        </div>
        <div class="row">
          <span>数据权限：</span>
          <span>
            <input type="text" placeholder="请选择" readonly :value="DataRightsValue" @click="toCheck(3)" />
          </span>
        </div>
        <div class="row">
          <span>操作权限：</span>
          <span>
            <input type="text" placeholder="请选择" readonly @click="toCheck(4)" :value="OperationValue" />
          </span>
        </div>
        <div class="row">
          <span>身份证号：</span>
          <span>
            <input type="text" placeholder="请输入" />
          </span>
        </div>
        <div class="row">
          <span>微信号：</span>
          <span>
            <input type="text" placeholder="请输入" />
          </span>
        </div>
        <div class="row">
          <span>手机号：</span>
          <span>
            <input type="text" placeholder="请输入" />
          </span>
        </div>
        <div class="row">
          <span>QQ号：</span>
          <span>
            <input type="text" placeholder="请输入" />
          </span>
        </div>
        <div class="row">
          <span>备注：</span>
          <span>
            <input type="text" placeholder="请输入" />
          </span>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="content-btn" v-if="$route.meta.isDetailShow">
      <div class="row" v-if="$route.params.id==2">
        <button>禁止登录</button>
        <button>修改</button>
        <button>启用登录</button>
      </div>
      <div class="row">
        <button>确定</button>
      </div>
    </div>
    <div style="height: 120px; visibility: hidden" v-if="$route.meta.isDetailShow"></div>
  </div>
</template>

<script>
export default {
  mounted() {},
  components: {},
  data() {
    return {
      showPicker: false,
      columns: [],
      selectIndex: '',
      departmentValue: '', //部门默认值
      positionValue: '', //职位默认值
      DataRightsValue: '', //数据权限默认值
      OperationValue: '', //操作权限默认值
      searchShow: false, //搜索账号面板
      searchLoading: true,
      NavTitle:'',
      titleId:1
    }
  },
  created(){
    this.getNavTitle()
  },
  methods: {
    getNavTitle(){
      let id=~~this.$route.params.id;
      
      switch(id){
        case 1:
          this.NavTitle='新建账号'
          this.titleId = 0
          break
        case 2:
          this.NavTitle='子账号详情'

          break
      }
    },
    //搜索账号
    toSearch() {
      this.searchShow = true
      //数据请求
      setTimeout(() => {
        this.searchLoading = false
      }, 300)
    },
    // 搜索账号---close
    toSearchClose(){
      this.searchShow=false;
      this.searchLoading=true
    },
    //1--部门，2--职位,3---数据权限,4---操作权限
    toCheck(index) {
      this.$router.push({
        path: `/companyCheckbox/${index}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.NewAccountItem {
  background: white;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2px;
  overflow: hidden;
  .NewAccountItem_popup {
    position: fixed;
    width: 100%;
    height: 100%;
    background: transparent;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 2;
    top: 0;
  }
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 10px;
    box-sizing: border-box;
    .left {
      width: 60px;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .right {
      width: calc(100% - 60px);
      .row {
        margin: 17px 0;
        font-size: 14px;
        display: flex;
        width: 100%;
        align-items: center;
        span {
          &:first-child {
            margin-right: 5px;
            white-space: nowrap;
            // text-overflow: ellipsis;
            // overflow: hidden;
            color: #646566;
            width: 70px;
            flex-shrink: 0;
            // border-right: 1px solid #a7a7a7;
          }
          &:last-child {
            white-space: nowrap;
            text-overflow: ellipsis;
            // overflow: hidden;
            input {
              color: #323233;
            }
          }
        }
      }
    }
  }
  .content-input {
    flex-direction: column;
    padding-top: 10px;
    .left {
      width: 100%;
      height: 65px;
      padding-bottom: 20px;
      img {
        height: 100%;
        width: auto;
      }
      span {
        font-size: 14px;
      }
    }
    .right {
      width: 100%;
      .row {
        position: relative;

        span {
          position: relative;

          &:last-child {
            width: 100%;
            input {
              width: 100%;
            }
            .search-pop {
              width: 100%;
              background: white;
              position: absolute;
              top: 22px;
              z-index: 3;
              border: 1px solid #cacaca;
              padding: 8px 10px;
              box-sizing: border-box;
              border-radius: 5px;
              box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
              .addaccount{
                text-align: center;
              }
              .search-item {
                width: 100%;
                display: flex;
                align-items: center;
                padding-bottom: 5px;
                margin-bottom: 8px;
                border-bottom: 2px solid #f5f5f5;
                &:last-child {
                  margin-bottom: 0;
                  border-bottom: 0;
                  padding-bottom: 0;
                }
                .search-left {
                  width: 40px;
                  height: 40px;
                  overflow: hidden;
                  border-radius: 50%;
                  margin-right: 10px;
                  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
                  img {
                    width: 100%;
                    vertical-align: middle;
                  }
                }
                .search-right {
                  display: flex;
                  flex-direction: column;
                  .account {
                    color: #333;
                    font-size: 16px;
                    font-weight: bold;
                  }
                  .name {
                    color: #646566;
                    margin-left: 5px;
                  }
                }
              }
            }
          }
        }
      }
    }
    input {
      border: none;
      border-radius: 0;
      border-bottom: 1px solid #dfdfdf;
    }
    .ellipsis-icon {
      position: absolute;
      right: 0;
      top: 0;
      border-radius: 5px;
      padding: 0 5px;
      border: 1px solid #1b1b1b;
      &.ellipsis-icon_2 {
        border: none;
        color: #1989fa;
        font-size: 23px !important;
        top: -3px;
      }
    }
  }
  .content-btn {
    width: 90%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    // background: white;
    .row {
      display: flex;
      justify-content: center;
      margin-bottom: 10px;
      button {
        width: 100%;
        font-size: 18px;
        padding: 2px 0;
        border: none;
        color: white;
        border-radius: 5px;
        margin: 0 5px;
        padding: 5px 0;
        &:nth-child(1) {
          background-color: #ff976a;
        }
        &:nth-child(2) {
          background-color: #ca4efe;
        }
        &:nth-child(3) {
          background-color: rgb(54, 215, 183);
        }
      }
      &:last-child {
        button {
          background-color: cornflowerblue;
          width: 100%;
        }
      }
    }
  }
}
</style>